<template>
  <div>
    <Row style="margin-bottom: 5px">
      <Col span="12" style="text-align: left;">
        <Input v-model="pageable.param" placeholder="搜索名称......" suffix="ios-search"
               style="width: 300px;margin-left: 0px;" @on-enter="doSearch"/>
      </Col>
    </Row>
    <Table :loading="switches.tableLoading" border :columns="columns" :data="tableData" ref="table" size="small"
           @on-row-dblclick="dataSelection"></Table>
    <Row style="text-align:right;padding:10px 5px;">
      <Page :total="total" size="small" show-elevator :page-size="pageable.size" @on-change="pageChange"></Page>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'TablePart',
    mounted: function () {
      this.loadTableDatas()
      window.vm.$on('goRefresh', () => {
       this.loadTableDatas()
      })
    },
    data () {
      return {
        switches: {
          tableLoading: false
        },
        pageable: {
          page: 0,
          size: 20,
          param: ''
        },
        tableData: [],
        total: 0,
        columns: [
          {
            title: '名称',
            key: 'label',
            align: 'center'
          },
          {
            title: '组态ID',
            key: 'uuid',
            ellipsis: true,
            tooltip: true,
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    ghost: true,
                    size: 'small',
                    icon: 'ios-trash-outline'
                  },
                  style: {
                    margin: '2px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认删除',
                        content: '您确定删除该数据吗?',
                        onOk: () => {
                          this.doDel(params.row.uuid)
                        },
                        okText: '确定',
                        cancelText: '取消',
                        onCancel: () => {
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      }
    },
    methods: {
      loadTableDatas: function () {
        this.switches.tableLoading = true
        window.myapi.do_gett('devcon/list2', this.pageable).then(resp => {
          this.tableData = resp.data.data.content
          this.total = resp.data.data.totalElements
        }).finally(() => {
        this.switches.tableLoading = false
        })
      },
      doSearch () {
        this.pageable.page = 0
        this.loadTableDatas()
      },
      doDel (uuid) {
        window.myapi.do_post('devcon/del2', {uuid: uuid}).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.loadTableDatas()
          }
        }).finally(() => {
        })
      },
      dataSelection (row, index) {
        // 清空高亮
        this.$refs.table.clearCurrentRow()
        // 高亮当前行
        this.$refs.table.handleCurrentRow('highlight', index)
        this.sendDataToEdit(row)
      },
      sendDataToEdit (data) {
        window.vm.$emit('editData', data)
      },
      pageChange: function (index) {
        this.pageable.page = index - 1
        this.loadTableDatas()
      }
    }
  }
</script>

<style scoped>

</style>
